<template>
  <div class="info" :class="{ darkInfo: darkTheme }">
    <div class="info-inner">
      <img
        src="../../../public/img/imageme.jpg"
        alt=""
        id="avator"
        @click="returnAllArticles"
        title="返回文章列表"
      />
      <h2 class="author">
        <a
          href="javascript:void(0);"
          @click="returnAllArticles"
          title="返回文章列表"
          >Des_tiny</a
        >
      </h2>
      <p class="desc">Powered by element-UI</p>
      <ul class="social">
        <li>
          <a href="#"><i class="el-icon-service"></i></a>
        </li>
        <li>
          <a href="#"><i class="el-icon-cherry"></i></a>
        </li>
        <li>
          <a href="#"><i class="el-icon-cold-drink"></i></a>
        </li>
        <li>
          <a href="#"><i class="el-icon-loading" title="饿了么兄嘚？"></i></a>
        </li>
        <li>
          <a href="#"><i class="el-icon-eleme"></i></a>
        </li>
      </ul>

      <div class="input-outer">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
          ><el-button
            type="primary"
            slot="append"
            icon="el-icon-search"
            @click="searchByInput"
          ></el-button>
        </el-autocomplete>
      </div>
    </div>
  </div>
</template>

<script>
import uri from "@/config/uri";
// import {debounce} from '@/assets/public'
import { mapState, mapMutations, mapActions } from "vuex";

// function debounce(callback,time){
//   var timer = null
//   return function () {
//       clearTimeout(timer)
//       timer = setTimeout(()=> {
//         callback()
//       },time)
//   }
// }

export default {
  data() {
    return {
      tips: [],
      state: "",
      timeout: null,
      searchByInput: () => {},
    };
  },
  computed: {
    ...mapState("common", ["darkTheme"]),
  },
  methods: {
    ...mapMutations("article", ["setArticleList"]),
    ...mapActions("article", ["searchByKeyWord","loadAllArticles"]),
    returnAllArticles() {
      const loading = this.$loading({ //显示loading遮罩
      lock: true,text: 'Loading...',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255 ,255 , .7)'
    });
      setTimeout(()=>{
        this.loadAllArticles()
        loading.close();
      },500)
    },
    loadAllTags() {
      let tmp = [];
      //打开新建页面，自动把所有tag渲染到标签选则栏的选项中
      this.$http
        .get(uri.getTag)
        .then((data) => {
          // this.tags = data.taglist
          this.$nextTick(() => {
            // console.log(data);
            let list = data.taglist;
            // console.log(list);
            for (let i = 0; i < list.length; i++) {
              tmp.push({ value: list[i] });
            }
          });
        })
        .catch((err) => {
          console.log("出错");
        });
      return tmp;
    },
    querySearchAsync(queryString, cb) {
      var tips = this.tips;
      var results = queryString
        ? tips.filter(this.createStateFilter(queryString))
        : tips;
      // cb(results)
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 500);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    mydebounce(callback, time) {
      var timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          callback();
        }, time);
      };
    },
    handleSelect(item) {
      // console.log(item);
    },
    realSearch() {
      if (this.state) {
        const loading = this.$loading({ //显示loading遮罩
          lock: true,text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(50, 50 ,50 , .7)'
        });
          this.searchByKeyWord(this.state);
          loading.close();
      } else {
        this.$message({ type: "Error", message: "输入不能为空" });
      }
    },
  },
  created() {
    // this.searchByInput = debounce(this.realSearch,1000)
    this.searchByInput = this.mydebounce(this.realSearch, 500);
  },
  mounted() {
    if (!this.tips.length) {
      this.tips = this.loadAllTags();
    }
  },
};
</script>

<style lang='scss'>
.info {
  position: fixed;
  width: 280px;
  top: 80px;
  margin-left: 20px;
  height: 330px;
  &-inner {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    background-color: aliceblue;
    height: 100%;
    .author {
      margin-top: 20px;
      font-weight: bold;
      a {
        color: #409eff;
        &:visited {
          color: #3385d8;
        }
        &:active {
          color: wheat;
        }
      }
    }
    .desc {
      line-height: 30px;
      color: cornflowerblue;
    }
    .social {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      line-height: 50px;
      i {
        font-size: 20px;
        padding: 2px;
        color: #2196f3;
        border: 2px solid #2196f3;
        border-radius: 50%;
        background-color: #fff;
        transition: all 0.3s;
        &:hover {
          border-color: #409eff;
          opacity: 0.7;
        }
      }
    }
  }
}
#avator {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: all 0.6s ease-in-out;
  border: 2px solid #b6d5f5;
  cursor: pointer;
  &:hover {
    transform: rotateZ(360deg);
  }
}

// 暗夜主题
.darkInfo {
  .info-inner {
    background-color: #263c4f;
    box-shadow: 0 0 10px rgb(61 122 132 / 50%);
    border: 1px solid #2196f3;
    border-radius: 3px;
    #avator {
      border: 2px solid #2196f3;
      box-shadow: 0 0 10px rgb(61 122 132 / 50%);
    }
    .author {
      a:hover {
        color: aqua;
      }
    }
    .social {
      i {
        background-color: #263c4f;
        color: #b6d5f5;
        &:hover {
          color: aqua;
          opacity: 1;
        }
      }
    }
    .input-outer {
      .el-input__inner {
        color: aqua;
        background-color: #263c4f;
        border: 1px solid #2196f3;
        &:hover {
          border-color: #2196f3;
        }
        // &:focus{
        //   border-color: aqua;
        // }
      }
      .el-input-group__append {
        background-color: rgba(61, 122, 132, 0.5);
        border: 1px solid #2196f3;
        transition: all .3s;
        .el-button {
          // background-color: #c6d2ea;
          color: white;
          // border: 1px solid #2196f3;
        }
        &:hover{
          background-color: aqua;

        }
      }
    }
  }
}
</style>